
import React, {Component} from 'react'
import {StyleSheet, Text, View, TextInput, Button} from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import {apiUrl} from '../../../config/index.js'
import actions from "../../../redux/action";
import {connect} from "react-redux";

type Props = {};
class Regist extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      phone: '',
      authCode: '',
      password: '',
      token: 'caa3b146db2e432a97312b0b2f86361f',
    };
  }
  regist(){
    const {onRegist} = this.props;
    let formData = new FormData();
    formData.append('phone', this.phone);
    formData.append('authCode', this.authCode);
    formData.append('password', this.password);
    console.log(formData)
    onRegist(formData)
  }
  getAuthCode(){
    const {fetchRegistAuthCode} = this.props;
    let formData = new FormData();
    formData.append('phone', this.phone);
    formData.append('token',this.state.token);
    console.log(formData)
    fetchRegistAuthCode(formData)
  }
  render() {
    const {regist} = this.props;
    console.log(regist)
    if(regist.authCodeStatus == 'done'){
      alert(regist.authCodeTip)
    }

    if(regist.registStatus == true){
      alert(regist.registTip)
    }
    return (
      <KeyboardAwareScrollView>
        <View style={styles.container}>
          <View style={styles.registForm}>
            <Text style={styles.registTitle}>注册</Text>
            <View style={styles.registItem}>
              <Text style={styles.registLabel}>手机号</Text>
              <View>
                <TextInput
                  maxLength = {11}
                  placeholder = {'请输入手机号码'}
                  placeholderTextColor = {'#D8D8D8'}
                  keyboardType = {'numeric'}
                  style = {styles.registTel}
                  onChangeText={text => {
                    this.phone = text;
                  }}
                />
              </View>
            </View>
            <View style={styles.registItem}>
              <Text style={styles.registLabel}>验证码</Text>
              <View style={styles.smsCodeContainer}>
                <TextInput
                  placeholder = {'请输入短信验证码'}
                  style={styles.registSmsCode}
                  onChangeText={text => {
                    this.authCode = text;
                  }}
                />
                <Text style={styles.sendSmsCode} onPress={() => {
                  this.getAuthCode()
                }}>获取验证码</Text>
              </View>
            </View>
            <View style={styles.registItem}>
              <Text style={styles.registLabel}>设置登录密码</Text>
              <TextInput
                placeholder = {'请输入登录密码'}
                style={styles.registPwd}
                onChangeText={text => {
                  this.password = text;
                }}
              />
            </View>
            <View style={styles.registItem}>
              <Button
                title="注册"
                color="#CCCCCC"
                style={styles.registBtn}
                onPress={() => {
                  this.regist()
                }}
              />
            </View>
            <View style={styles.registFooter}>
              <Text>已同意并阅读</Text><Text>用户服务协议</Text>
            </View>
          </View>
        </View>
      </KeyboardAwareScrollView>
    );
  }
}

const mapStateToProps = state => ({
  regist: state.regist,
});
const mapDispatchToProps = dispatch => ({
  fetchRegistAuthCode: (params) => dispatch(actions.fetchRegistAuthCode(params)),
  onRegist: (params) => dispatch(actions.onRegist(params))
});

export default connect(mapStateToProps, mapDispatchToProps)(Regist);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 100,
  },
  registForm: {
    padding: 27,
    paddingTop: 50,
  },
  registTitle: {
    color: '#282828',
    fontSize: 38,
  },
  registItem: {
    marginTop: 37
  },
  registLabel: {
    color: '#666666',
    fontSize: 16,
  },
  registTel: {
    height: 43,
    borderColor: '#F4F4F4',
    borderBottomWidth: 1,
    color: '#D8D8D8'
  },
  smsCodeContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-start',
    borderColor: '#F4F4F4',
    borderBottomWidth: 1,
  },
  registSmsCode: {
    flex: 1,
    height: 43,
  },
  sendSmsCode: {
    color: '#3E73FF',
    fontSize: 14,
    marginTop: 10
  },
  registPwd: {
    height: 43,
    borderColor: '#F4F4F4',
    borderBottomWidth: 1,
    color: '#D8D8D8'
  },
  registBtn: {
    marginTop: 37,
  },
  registFooter: {
    flex: 1,
    marginTop: 37,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  forgetPwd: {
    flex: 1
  },
  userRegist: {
    flex: 1,
    textAlign: 'right'
  }
});
